<template>
    <!-- 所有 html 内容写入当前标签-->
    <h2>Vue基础</h2>

    <div>
        <!-- 文本插值会直接将数据解析为纯HTML-->
        文本插值数据输出：{{msg}}<br/>
        年龄为：{{age}}<br/>
    </div>

    <!--在Vue中只要看到v-开头的语句，都被视为vue指令-->
    <div v-html="address">
    </div>

    
    <div>
        <!--v-bind指令：用于将vue实例中的数据绑定到html属性中 v-bind因为使用频繁，支持省略为：属性-->
        <input type="text" id="Sid" name="Sname"/><br/>
        <input type="text" :id="Sid"  :name="Sname"/><br/>

        <!-- 从对象中取数据 -->
        <input type="text" :id="info.Nid"  :name="info.Nname"/><br/>
        
    </div>

    <div>
        班级名称：{{ ClassName.substring(0,5) }}<br/>
        班级人数为：{{ClassNum==35?"人数错误":"人数正确"}}<br/>
    </div>

</template>

<script setup lang="ts">
//所有的 ts\js 代码都在这里写

//声明常量并赋值
const msg="你好";
const age=23;
//地址：路径
const address="<a href='https://www.baidu.com/'>百度官网</a>"

const Sid="1001";
const Sname="张三";

//{} 声明对象，对象中加入了两个参数
const info={
    Nid:"101",
    Nname:"李四"
}

const ClassName="物联网工程学院2208B.netB";
const ClassNum=34;

</script>